Een uitgebreide gids voor het gebruik van CSS @font-face voor het laden van aangepaste lettertypen, inclusief optimalisatietechnieken voor betere websiteprestaties en gebruikerservaring voor een divers, wereldwijd publiek.
CSS Font Face: Strategieën voor het laden en optimaliseren van aangepaste lettertypen voor wereldwijd webdesign
Typografie speelt een cruciale rol in webdesign en vormt de gebruikerservaring en de identiteit van uw merk. De @font-face-regel in CSS stelt ontwikkelaars in staat om aangepaste lettertypen rechtstreeks in hun websites in te sluiten, wat meer controle biedt over de visuele presentatie van tekst en een uniekere en boeiendere gebruikerservaring mogelijk maakt. Een onjuiste implementatie kan echter leiden tot prestatieproblemen, wat de laadtijden van de website beïnvloedt en de gebruikerstevredenheid negatief beïnvloedt, vooral voor gebruikers in regio's met langzamere internetverbindingen.
Deze uitgebreide gids verkent de complexiteit van @font-face en behandelt best practices voor het laden van aangepaste lettertypen en optimalisatiestrategieën om een naadloze en performante ervaring voor een wereldwijd publiek te garanderen. We zullen dieper ingaan op verschillende lettertypeformaten, optimalisatietechnieken en geavanceerde functies om u te helpen de kunst van webtypografie onder de knie te krijgen.
De @font-face-regel begrijpen
De @font-face-regel is een krachtige CSS at-rule waarmee u aangepaste lettertypebestanden kunt specificeren die op uw website gedownload en gebruikt kunnen worden. Het overbrugt in wezen de kloof tussen de beperkte set systeemlettertypen en de enorme wereld van aangepaste typografie.
Hier is de basissyntaxis:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Laten we de componenten opsplitsen:
font-family: Deze eigenschap definieert de naam die u zult gebruiken om naar het aangepaste lettertype te verwijzen in uw CSS-regels. Kies een beschrijvende en unieke naam.src: Deze eigenschap specificeert de locatie van de lettertypebestanden. U kunt meerdere bronnen opgeven, zodat de browser het optimale formaat kan kiezen op basis van zijn mogelijkheden. Deformat()-functie geeft het lettertypeformaat van elk bestand aan.font-weight: Deze eigenschap definieert de dikte (boldness) van het lettertype. Veelvoorkomende waarden zijnnormal,bold,lighter,bolderen numerieke waarden zoals100,400,700, etc.font-style: Deze eigenschap definieert de stijl van het lettertype (bijv.normal,italic,oblique).
Eenmaal gedefinieerd, kunt u het aangepaste lettertype als volgt in uw CSS-regels gebruiken:
body {
font-family: 'MyCustomFont', sans-serif;
}
Dit past 'MyCustomFont' toe op de gehele body van uw website. Het sans-serif is een fallback-lettertype dat wordt gebruikt als het aangepaste lettertype niet kan worden geladen.
De juiste lettertypeformaten kiezen: een wereldwijd perspectief
Verschillende browsers ondersteunen verschillende lettertypeformaten. Om brede compatibiliteit te garanderen, is het cruciaal om uw lettertypen in meerdere formaten aan te bieden. Hier is een overzicht van veelvoorkomende lettertypeformaten en hun browserondersteuning:
- WOFF2 (Web Open Font Format 2): Het modernste en sterk aanbevolen formaat, dat superieure compressie en prestaties biedt. Ondersteund door alle moderne browsers.
- WOFF (Web Open Font Format): Een breed ondersteund formaat dat goede compressie biedt. Nog steeds relevant voor oudere browsers.
- EOT (Embedded Open Type): Specifiek ontworpen voor Internet Explorer. Over het algemeen niet meer nodig, tenzij u absoluut zeer oude versies van IE moet ondersteunen.
- TTF (TrueType Font) / OTF (OpenType Font): Oudere formaten die over het algemeen groter zijn en minder geoptimaliseerd voor webgebruik. Vermijd het direct gebruiken van deze formaten waar mogelijk.
- SVG Fonts: Een ouder formaat, dat tegenwoordig niet vaak meer wordt gebruikt vanwege browserondersteuning en andere beperkingen.
Aanbeveling: Gebruik WOFF2 als uw primaire formaat en bied WOFF aan als een fallback voor oudere browsers. Overweeg EOT alleen als u zeer oude versies van Internet Explorer moet ondersteunen.
Hier is een voorbeeld van het aanbieden van meerdere lettertypeformaten in uw @font-face-regel:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff'),
url('mycustomfont.eot') format('embedded-opentype'); /* For older IE */
font-weight: normal;
font-style: normal;
}
Strategieën voor het laden van lettertypen: optimaliseren voor snelheid en gebruikerservaring
De manier waarop u uw lettertypen laadt, kan de prestaties van uw website aanzienlijk beïnvloeden. Hier zijn verschillende strategieën voor het laden van lettertypen die u kunt gebruiken:
1. Basis Lettertype Laden (Standaard Gedrag)
Standaard blokkeren browsers doorgaans het renderen van tekst totdat het lettertype is gedownload. Dit kan leiden tot een waargenomen prestatieknelpunt, waarbij gebruikers een korte periode een leeg scherm of onzichtbare tekst zien (vaak een "flash of invisible text" of FOIT genoemd).
Hoewel eenvoudig te implementeren, wordt deze aanpak over het algemeen niet aanbevolen voor een optimale gebruikerservaring.
2. De font-display-eigenschap gebruiken
De font-display-eigenschap biedt meer controle over hoe lettertypen worden geladen en weergegeven. Hiermee kunt u het gedrag tijdens het laadproces van het lettertype aanpassen, wat een soepelere ervaring voor uw gebruikers oplevert. Dit is de aanbevolen aanpak voor de meeste situaties.
Hier zijn de mogelijke waarden voor font-display:
auto: De browser gebruikt zijn standaard strategie voor het laden van lettertypen (meestal FOIT).block: Geeft het lettertype een korte blokperiode en een oneindige wisselperiode. De browser verbergt de tekst aanvankelijk en geeft deze weer wanneer het lettertype is geladen. Als het lettertype niet binnen een korte periode (meestal 3 seconden) wordt geladen, wordt het fallback-lettertype weergegeven.swap: Geeft het lettertype een blokperiode van nul en een oneindige wisselperiode. De browser geeft de tekst onmiddellijk weer met een fallback-lettertype. Zodra het aangepaste lettertype is geladen, wordt de tekst gewisseld naar het aangepaste lettertype. Dit vermijdt de FOIT, maar kan resulteren in een "flash of unstyled text" (FOUT).fallback: Geeft het lettertype een zeer korte blokperiode en een korte wisselperiode. Dit is een compromis tussenblockenswap. De browser verbergt de tekst voor een zeer korte periode en wisselt dan naar het fallback-lettertype als het aangepaste lettertype niet is geladen. Het blijft lettertypen wisselen voor een korte periode, waarna het stopt en simpelweg het fallback-lettertype gebruikt.optional: Geeft het lettertype een extreem korte blokperiode en geen wisselperiode. Handig voor lettertypen die niet cruciaal zijn voor de initiële weergave van de pagina (bijv. lettertypen die worden gebruikt in niet-essentiële UI-elementen).
Aanbevelingen:
- Voor de meeste scenario's biedt
swapde beste balans tussen waargenomen prestaties en visuele stabiliteit. Gebruikers zien direct tekst, ook al is deze in eerste instantie gestyled met een fallback-lettertype. - Gebruik
fallbackals u de FOUT wilt minimaliseren, maar toch prioriteit wilt geven aan het aangepaste lettertype. - Gebruik
optionalvoor niet-kritieke lettertypen om onnodige blokkering van de paginarendering te voorkomen.
Voorbeeld van het gebruik van font-display: swap:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
3. Lettertypen Vooraf Laden (Preloading)
Het vooraf laden van lettertypen kan de prestaties verbeteren door de browser de opdracht te geven de lettertypebestanden zo vroeg mogelijk te downloaden. Dit kan de vertraging die gepaard gaat met het laden van lettertypen verminderen, wat resulteert in een snellere waargenomen laadtijd.
Gebruik de <link rel="preload">-tag in de <head> van uw HTML-document om lettertypen vooraf te laden:
<link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
Uitleg:
rel="preload": Specificeert dat de resource vooraf geladen moet worden.href: Specificeert de URL van het lettertypebestand.as="font": Specificeert het type resource dat wordt voorgeladen (in dit geval een lettertype).type="font/woff2": Specificeert het MIME-type van het lettertypebestand.crossorigin: Vereist als het lettertype vanaf een andere oorsprong wordt geladen (bijv. een CDN).
Let op: Het vooraf laden van te veel resources kan de prestaties negatief beïnvloeden. Laad alleen lettertypen vooraf die cruciaal zijn voor de initiële weergave van de pagina.
4. Font Loading API (Geavanceerd)
De Font Loading API biedt een meer granulair controleniveau over het laden van lettertypen. Hiermee kunt u detecteren wanneer een lettertype is geladen, de laadvoortgang volgen en fouten afhandelen. Dit kan handig zijn voor het implementeren van meer geavanceerde strategieën voor het laden van lettertypen.
Voorbeeld (JavaScript):
document.fonts.load('1em MyCustomFont').then(function() {
// Font has loaded successfully
console.log('MyCustomFont loaded!');
});
De Font Loading API is complexer in gebruik dan de font-display-eigenschap, maar biedt meer flexibiliteit voor geavanceerde gebruiksscenario's.
Lettertypebestanden Optimaliseren: Grootte Verminderen en Prestaties Verbeteren
Het optimaliseren van uw lettertypebestanden is cruciaal voor het verbeteren van de websiteprestaties en het verkorten van laadtijden. Hier zijn verschillende technieken die u kunt gebruiken:
1. Lettertype-subsetting
De meeste lettertypen bevatten een groot aantal glyphs (tekens), waarvan er vele mogelijk niet op uw website worden gebruikt. Lettertype-subsetting houdt in dat ongebruikte glyphs uit het lettertypebestand worden verwijderd, waardoor de grootte aanzienlijk wordt verkleind. Dit is vooral belangrijk bij het ondersteunen van meerdere talen, aangezien lettertypen glyphs kunnen bevatten voor tekens die in een bepaalde regio niet worden gebruikt.
Voordelen:
- Kleinere lettertypebestandsgrootte
- Snellere downloadtijden
- Verbeterde websiteprestaties
Tools voor Lettertype-subsetting:
- FontForge (Open Source): Een krachtige desktop lettertype-editor waarmee u handmatig lettertypen kunt subsetten.
- Glyphhanger (Command Line): Een command-line tool die ongebruikte glyphs identificeert en subsets creëert.
- Online Tools voor Lettertype-subsetting: Er zijn verschillende online tools beschikbaar voor het subsetten van lettertypen, zoals Font Squirrel's Webfont Generator.
Unicode-range
Voor meertalige sites kan de unicode-range CSS-descriptor worden gebruikt om te specificeren voor welke Unicode-tekenbereiken het lettertype moet worden gebruikt. Dit stelt de browser in staat om alleen de noodzakelijke delen van het lettertype te downloaden, wat de prestaties verbetert. Dit is vooral handig bij talen met grote tekensets zoals Chinees, Japans en Koreaans (CJK).
Voorbeeld:
@font-face {
font-family: 'NotoSansCJK';
src: url('NotoSansCJK-Regular.woff2') format('woff2');
unicode-range: U+4E00-9FFF, /* Common CJK Unified Ideographs */
U+3040-309F, /* Hiragana */
U+30A0-30FF; /* Katakana */
font-weight: normal;
font-style: normal;
}
2. Compressie
Zorg ervoor dat uw lettertypebestanden correct zijn gecomprimeerd met Gzip of Brotli. De meeste webservers ondersteunen deze compressie-algoritmen, die de grootte van de lettertypebestanden tijdens de overdracht aanzienlijk kunnen verkleinen.
Voordelen:
- Kleinere bestandsgrootte tijdens overdracht
- Snellere downloadtijden
3. SVG-lettertypen Optimaliseren
Als u SVG-lettertypen gebruikt (hoewel over het algemeen niet aanbevolen), optimaliseer dan de SVG-bestanden met tools zoals SVGO (SVG Optimizer) om onnodige metadata te verwijderen en de bestandsgrootte te verkleinen.
4. Variabele Lettertypen
Variabele lettertypen zijn een relatief nieuwe lettertypetechnologie waarmee een enkel lettertypebestand meerdere variaties van een lettertype kan bevatten, zoals verschillende diktes, breedtes en stijlen. Dit kan de totale bestandsgrootte aanzienlijk verminderen in vergelijking met het gebruik van afzonderlijke lettertypebestanden voor elke variatie.
Voordelen:
- Kleinere bestandsgroottes in vergelijking met traditionele lettertypeformaten bij gebruik van meerdere variaties
- Grotere ontwerpvrijheid
5. Caching
Configureer uw webserver om lettertypebestanden correct te cachen. Dit stelt browsers in staat om de lettertypebestanden lokaal op te slaan, waardoor ze bij volgende bezoeken niet opnieuw hoeven te worden gedownload.
Voordelen:
- Snellere laadtijden voor terugkerende bezoekers
- Verminderde serverbelasting
Overwegingen voor Toegankelijkheid
Bij het gebruik van aangepaste lettertypen is het essentieel om rekening te houden met toegankelijkheid om ervoor te zorgen dat uw website door iedereen bruikbaar is, inclusief mensen met een handicap.
1. Voldoende Contrast
Zorg ervoor dat de tekstkleur voldoende contrast biedt ten opzichte van de achtergrondkleur om te voldoen aan de WCAG-normen (Web Content Accessibility Guidelines). Gebruik een contrastcontroletool om te verifiëren dat de contrastverhouding adequaat is.
2. Leesbare Lettergrootte
Gebruik een lettergrootte die groot genoeg is om gemakkelijk leesbaar te zijn, vooral voor gebruikers met een visuele beperking. Vermijd het gebruik van te kleine lettergroottes.
3. Letterdikte
Kies een letterdikte die gemakkelijk leesbaar is. Vermijd het gebruik van te dunne of lichte lettertypen, omdat deze voor sommige gebruikers moeilijk te lezen kunnen zijn.
4. Fallback-lettertypen
Zorg voor geschikte fallback-lettertypen in uw CSS-regels om ervoor te zorgen dat tekst nog steeds leesbaar is, zelfs als het aangepaste lettertype niet kan worden geladen. Kies fallback-lettertypen die qua stijl en uiterlijk vergelijkbaar zijn met het aangepaste lettertype.
5. Tekstgrootte Aanpassen
Zorg ervoor dat gebruikers de tekst op uw website gemakkelijk kunnen vergroten met behulp van de browserzoom of andere toegankelijkheidstools. Vermijd het gebruik van vaste eenheden (bijv. pixels) voor lettergroottes. Gebruik in plaats daarvan relatieve eenheden (bijv. em, rem).
6. Taalattributen
Stel het lang-attribuut correct in op de <html>-tag om de taal van de pagina aan te geven. Dit helpt schermlezers en andere hulptechnologieën de tekst correct weer te geven.
Voorbeeld:
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<p>This is some text in English.</p>
</body>
</html>
Cross-Browser Compatibiliteit
Zorg ervoor dat uw aangepaste lettertypen compatibel zijn met een breed scala aan browsers. Test uw website op verschillende browsers en apparaten om eventuele compatibiliteitsproblemen te identificeren. Gebruik tools zoals BrowserStack of Sauce Labs om uw website te testen op een verscheidenheid aan browsers en besturingssystemen.
Overweeg het gebruik van een CSS-reset stylesheet (bijv. Normalize.css) om de standaardstijlen in verschillende browsers te normaliseren.
Veelvoorkomende Valkuilen om te Vermijden
- Te veel aangepaste lettertypen gebruiken: Het gebruik van te veel aangepaste lettertypen kan de prestaties negatief beïnvloeden en een rommelige visuele ervaring creëren. Beperk het aantal aangepaste lettertypen op uw website tot maximaal twee of drie.
- Grote lettertypebestanden gebruiken: Grote lettertypebestanden kunnen de laadtijden aanzienlijk verlengen. Optimaliseer uw lettertypebestanden met de hierboven beschreven technieken.
- Geen fallback-lettertypen aanbieden: Het niet aanbieden van fallback-lettertypen kan resulteren in onzichtbare tekst als het aangepaste lettertype niet kan worden geladen.
- Toegankelijkheidsoverwegingen negeren: Het negeren van toegankelijkheidsoverwegingen kan uw website onbruikbaar maken voor mensen met een handicap.
- Niet testen op verschillende browsers: Niet testen op verschillende browsers kan leiden tot compatibiliteitsproblemen.
- Hotlinken van lettertypebestanden rechtstreeks vanaf de site van de ontwerper of andere onbetrouwbare bronnen: Host lettertypen alleen vanaf uw eigen website, CDN of een gerenommeerde lettertypeservice.
Best Practices voor Wereldwijde Webtypografie
Bij het ontwerpen van websites voor een wereldwijd publiek is het belangrijk om rekening te houden met de volgende best practices voor webtypografie:
- Kies lettertypen die meerdere talen ondersteunen: Selecteer lettertypen die glyphs bevatten voor de talen die u op uw website wilt ondersteunen.
- Gebruik geschikte lettergroottes voor verschillende talen: Lettergroottes die geschikt zijn voor de ene taal zijn mogelijk niet geschikt voor een andere. Pas de lettergroottes indien nodig aan om de leesbaarheid in verschillende talen te garanderen.
- Houd rekening met regelhoogte en letterafstand: Regelhoogte en letterafstand kunnen de leesbaarheid beïnvloeden, vooral bij talen met complexe tekensets. Pas deze waarden indien nodig aan om de leesbaarheid te optimaliseren.
- Gebruik de juiste tekstuitlijning: De juiste tekstuitlijning kan variëren afhankelijk van de taal. Zo gebruiken links-naar-rechts-talen doorgaans linkse uitlijning, terwijl rechts-naar-links-talen doorgaans rechtse uitlijning gebruiken.
- Test uw website met verschillende talen: Test uw website met verschillende talen om ervoor te zorgen dat de typografie er correct uitziet en gemakkelijk leesbaar is.
Voorbeeld: Een lettertype gebruiken met wereldwijde tekenondersteuning
Overweeg het gebruik van een lettertype zoals Noto Sans, dat is ontworpen om een breed scala aan talen en schriften te ondersteunen. Google biedt Noto Sans en zijn vele varianten (Noto Sans CJK, Noto Sans Arabic, etc.) aan als een gratis weblettertype.
Conclusie
Het beheersen van CSS @font-face en het implementeren van effectieve strategieën voor het laden en optimaliseren van lettertypen zijn cruciaal voor het creëren van performante en visueel aantrekkelijke websites voor een wereldwijd publiek. Door de nuances van lettertypeformaten, laadtechnieken en optimalisatiemethoden te begrijpen, kunt u een naadloze en boeiende gebruikerservaring bieden die geografische grenzen en culturele verschillen overstijgt.
Door de best practices in deze gids te volgen, kunt u ervoor zorgen dat de typografie van uw website het algehele ontwerp verbetert, de prestaties verhoogt en een toegankelijke ervaring biedt voor alle gebruikers, ongeacht hun locatie of apparaat.